<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#submit").click(function () {
                //获取用户名和密码
                username = $('#username').val();
                password = $('#password').val();
                var remember = document.getElementById('remember');
                checkFlag = remember.checked;

                //发起登录的ajax请求
                $.ajax({
                    'url': '/login_check',
                    'type': 'post',
                    'datatype': 'json',
                    //这里是请求参数
                    'data': {'username': username, 'password': password, 'remember': checkFlag},
                }).success(function (data) {
                    //登录成功：{'res':'1'}
                    //登录失败：{'res':'0'}
                    if (data.res == 1) {
                        //登录成功跳转到主页
                        location.href = '/main';
                    } else {
                        $('#msg').show().html("登录失败，用户名或密码错误");
                    }
                })
            })
        })
    </script>

    <style>
        #msg {
            color: red;
            display: none;
        }
    </style>


</head>
<body>
<h1>请登录</h1>
用户名：<input type="text" name="username" id="username" value="{{ username }}">
<br/>
密码：<input type="password" name="password" id="password">
<br/>
记住用户名<input type="checkbox" name="remember" id="remember">
<br/>

<input type="submit" name="submit" id="submit" value="登录">
<div id="msg"></div>
</body>
</html>